<template>
  <div id="houseBuilding" :class="{ smallFontSize: showEdition, mediumFontSize: !showEdition }">
    <div>
      <div class="content">
        <div v-show="ISShow" :class="showMoble ? 'contentTop' : 'showPC'">
          <ul class="content-nfjs" v-if="!showBg1">
            <li
              v-for="(item, index) in NFJSData"
              v-if="index == 0"
              :style="{ marginRight: (index + 1) % 2 !== 0 ? '2%' : '' }"
              :key="index"
              style="background: url('https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/98 (2).png')"
              @click="NFJSClick(item)">
              <span>
                {{ item.name }}
              </span>
            </li>
            <li
              v-for="(item, index) in NFJSData"
              v-if="index == 1"
              :style="{ marginRight: (index + 1) % 2 !== 0 ? '2%' : '' }"
              :key="index"
              style="background: url('https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/98 (3).png')"
              @click="NFJSClick(item)">
              <span>
                {{ item.name }}
              </span>
            </li>
            <li
              v-for="(item, index) in NFJSData"
              v-if="index == 2"
              :style="{ marginRight: (index + 1) % 2 !== 0 ? '2%' : '' }"
              :key="index"
              style="background: url('https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/98 (1).png')"
              @click="NFJSClick(item)">
              <span>
                {{ item.name }}
              </span>
            </li>
          </ul>
          <ul class="content-nfjs" v-else>
            <li
              v-for="(item, index) in NFJSData"
              :style="{ background: 'url(' + item.bg + ')', marginRight: (index + 1) % 2 !== 0 ? '2%' : '' }"
              :key="index"
              style="background: url('https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/98 (2).png')"
              @click="NFJSClick(item)">
              <span>
                {{ item.name }}
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { areaList } from '@vant/area-data'
import { LoadGridData, getRequestId } from '../../utils/api'
export default {
  data() {
    return {
      showMoble: true, //初始化移动端相关内容的显示
      showEdition: true,
      showBg1: true,
      nowIndex: 0,
      areaValue: [''],
      ISShow: true,
      IsShowAre: false,
      usernem: '',
      areaList,
      imageList: [
        { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' }
      ],
      bottomData: [
        {
          name: '首页',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20.png',
          icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20-1.png'
        },
        {
          name: '我的申请',
          icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21.png',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21-1.png'
        },
        {
          name: '我的收藏',
          icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/22.png',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/22-1.png'
        }
      ],
      NFJSData: [
        {
          name: '原址翻建',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/3.png',
          bg1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/98 (1).png'
        },
        {
          name: '改扩建',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/4.png',
          bg1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/98 (1).png'
        },
        {
          name: '异址新建',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/5.png',
          bg1: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/98 (1).png'
        }
      ],
      NFJSDataThirdParty: [
        {
          name: '我要入驻',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/32.png'
        },
        {
          name: '我的项目',
          bg: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/33.png'
        }
      ],
      ISShowList: true,
      requestId: '',
      accessKey: '17ce0a9ca3034da28dda1cb381ab3d39'
    }
  },
  components: {},
  methods: {
    /* 分辨率区分--PC端+移动端 */
    judgmentResolution() {
      var sUserAgent = navigator.userAgent.toLowerCase()
      var bIsIpad = sUserAgent.match(/ipad/i) == 'ipad'
      var bIsIphoneOs = sUserAgent.match(/iphone os/i) == 'iphone os'
      var bIsMidp = sUserAgent.match(/midp/i) == 'midp'
      var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == 'rv:1.2.3.4'
      var bIsUc = sUserAgent.match(/ucweb/i) == 'ucweb'
      var bIsAndroid = sUserAgent.match(/android/i) == 'android'
      var bIsCE = sUserAgent.match(/windows ce/i) == 'windows ce'
      var bIsWM = sUserAgent.match(/windows mobile/i) == 'windows mobile'
      if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
        this.showMoble = true
      } else {
        this.showMoble = false
      }
    },
    async getrequestId() {
      let data = {
        idCardNum: window.localStorage.getItem('DanDianid'),
        idCardType: '1',
        idCardUserName: window.localStorage.getItem('DanDianName')
      }
      const res = await getRequestId(data)
      if (res.data.code == 200) {
        this.requestId = res.data.data?.requestId
      } else {
        this.$confirm({
          title: '提示',
          message: '获取用户信息失败请重试',
          btn: {
            okText: '确定',
            cancelText: '取消'
          }
        })
          .then(() => {
            // do something
          })
          .catch(() => {
            console.log('no')
          })
      }
    },
    NFJSClick(item) {
      this.$store.commit('getNowName', item.name)
      if (processENV1.NODE_ENV == '"development"') {
        switch (item.name) {
          case '原址翻建':
            this.$router.push({
              path: '/ApplicationPage',
              query: {
                name: '原址翻建',
                tuijian: this.$route.query.data ? this.$route.query.data : ''
              }
            })
            break
          case '改扩建':
            this.$router.push({
              path: '/ApplicationPage',
              query: {
                name: '改扩建',
                tuijian: this.$route.query.data ? this.$route.query.data : ''
              }
            })
            break
          case '异址新建':
            this.$router.push({
              path: '/ApplicationPage',
              query: {
                name: '异址新建',
                data: this.$route.query.data ? this.$route.query.data : ''
              }
            })
            break
        }
        return
      }

      //先进行人脸核验 核验通过后进行下一步
      ZWJSBridge.onReady(() => {
        ZWJSBridge.authentication({
          accessKey: this.accessKey,
          requestId: this.requestId
        })
          .then((data) => {
            // data=> {"pass" : true, // "passId" : "xxxxx"}
            if (data?.pass) {
              switch (item.name) {
                case '原址翻建':
                  this.$router.push({
                    path: '/ApplicationPage',
                    query: {
                      name: '原址翻建',
                      tuijian: this.$route.query.data ? this.$route.query.data : ''
                    }
                  })
                  break
                case '改扩建':
                  this.$router.push({
                    path: '/ApplicationPage',
                    query: {
                      name: '改扩建',
                      tuijian: this.$route.query.data ? this.$route.query.data : ''
                    }
                  })
                  break
                case '异址新建':
                  this.$router.push({
                    path: '/ApplicationPage',
                    query: {
                      name: '异址新建',
                      data: this.$route.query.data ? this.$route.query.data : ''
                    }
                  })
                  break
              }
            } else {
              this.$toast.fail('人脸认证失败请重试')
            }
          })
          .catch((error) => {
            // if (!ZWJSBridge) {
            console.log(error)
            // }
            // this.$toast.fail('人脸认证失败请重试')
          })
      })
    }
  },
  mounted() {
    this.showEdition = this.$store.state.Edition
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        title: '我要建房'
      })
        .then((res) => {})
        .catch((err) => {})
    }
  },
  created() {
    this.getrequestId()
    if (window.sessionStorage.getItem('showBg1') == 'true') {
      this.showBg1 = false
    } else {
      this.showBg1 = true
    }
    this.judgmentResolution()
  },
  beforeRouteEnter(to, from, next) {
    if (from.name === 'ApplicationPage') {
      window.location.reload() // 页面刷新
      next()
    } else {
      next()
    }
  }
}
</script>
<style lang="scss" scoped>
#houseBuilding {
  height: calc(100vh - 60px);
  overflow: auto;
  background: #fff;
  font-family: 'Helvetica Neue', Helvetica, STHeiTi, sans-serif;

  .top {
    position: relative;
    color: #ffffff;

    .left-top {
      position: absolute;
      left: 10px;
      top: 10px;

      .btn {
        width: auto;
        height: 26px;
        border: 1px solid #e1eaff;
        border-radius: 4px;
        display: inline-block;
        line-height: 26px;
        text-align: center;
      }
    }

    .bottom-top {
      width: 95%;
      position: absolute;
      left: 10px;
      bottom: 10px;

      .btn {
        float: right;
        width: auto;
        height: 26px;
        // border: 1px solid #e1eaff;
        border-radius: 16px;
        display: inline-block;
        line-height: 26px;
        text-align: center;
      }
    }
  }

  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.1);
  }

  .SQList {
    height: calc(100vh - 60px);
    background: #ffffff;

    .title {
      width: 100%;
      height: 50px;
      background: #007aff;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      font-size: 20px;
      position: relative;
    }

    ul li {
      padding: 10px;
      height: 90px;
      border-bottom: 1px solid #d2d2d2;
      margin-bottom: 10px;
    }
  }

  .content {
    width: 100%;
    height: calc(100vh - 260px);

    .line {
      width: 6px;
      height: 26px;
      background: #007aff;
      display: inline-block;
    }

    .content-nfjs li {
      width: 49%;
      height: 80px;
      float: left;
      margin-top: 2%;
      position: relative;
      background-size: 100% 100% !important;
      display: flex;
      align-items: center;
      padding-left: 60px;
    }

    .content-nffw li {
      width: 20%;
      float: left;
      margin-top: 2%;

      span {
        width: 100%;
        display: inline-block;
        font-size: 14px;
        text-align: center;
      }
    }

    .content-nffm li {
      width: 49%;
      float: left;
      margin-top: 2%;
      margin-bottom: 3%;

      .text {
        width: 100%;
        display: inline-block;
        height: 6vh;
        background: #ffffff;
        box-shadow: 2px 1px 6px 0px rgba(0, 0, 0, 0.17);
        border-radius: 0px 0px 20px 20px;
        text-align: center;
        line-height: 6vh;
      }
    }

    .contentTop {
      background: #ffffff;
      padding: 10px;
      height: 330px;
      margin-bottom: 20px;
    }
  }

  .showPC {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    ul li {
      width: 100%;
    }
  }

  .phoneText {
    margin: 8px;
    height: 86px;
  }

  .bottom {
    clear: both;
    position: fixed;
    bottom: 0;
    // height: 100px;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    background: #ffffff;

    ul li {
      //   margin: 10px 0 16px 0;
      float: left;
      width: 33.3%;
    }
  }
}
</style>

<style lang="scss">
#houseBuilding {
  .van-cell {
    padding: 4px !important;
    overflow: hidden;
    color: #fff !important;
    font-size: 14px;
    line-height: 24px;
    background-color: transparent !important;
  }

  .van-cell__value--alone {
    color: #fff !important;
  }
}
</style>
